<template>
    <div class="container">
        <statistics-header header-title="隔 离 人 员 数 据 库"></statistics-header>
        <statistics-bar bar-type="isolation" ref="statisticsBar" @getType="getType" ></statistics-bar>
        <div class="report-content">
            <div class="search-group">
                <div class="left-content">
                    <div class="data-title">数据库信息</div>
                    <dlq-search @search="search" search-type="1" search-more="searchMore" :area-name="areaName"></dlq-search>
                </div>
<!--                <div class="record-num"><span style="color: red;">{{totalnum}}</span>条数据</div>-->
            </div>
            <Row class="main-table">
                <vxe-toolbar export custom></vxe-toolbar>
                <vxe-table
                        border
                        resizable
                        highlight-hover-row
                        height="700"
                        size="medium"
                        show-overflow="tooltip"
                        :loading="tableLoading"
                        align="center"
                        header-align="center"
                        :sort-config="{trigger: 'cell'}"
                        :data="tableData"
                        :checkbox-config="{checkField: 'checked'}">
                    <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                    <vxe-table-column :field="item.key" :title="item.title" :width="item.width" :visible="item.visible"
                                      v-for="(item,index) in tableColumns" :key="index">
                    </vxe-table-column>
                    <!--                    <vxe-table-column field="place_type_name" title="场所类别" width="150"></vxe-table-column>-->
                </vxe-table>
            </Row>
            <br>
            <Row type="flex" justify="center">
                <Page show-sizer :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                      @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
            </Row>
        </div>
    </div>
</template>
<script>
import {
  findglrypxList
} from '@/api/statistics-data-list'
import areaJSON from '@/libs/area'
import StatisticsHeader from '@/components/statistics-header'
import StatisticsBar from '@/components/statistics-bar'
import DlqSearch from '@/components/search'
export default {
  components: { StatisticsBar, StatisticsHeader, DlqSearch },
  data () {
    return {
      isolation_mode: [],
      drawer: false,
      areaName: '',
      totalnum: 0,
      typeNumObj: [
      ],
      searchObj: {},
      pageObj: {
        pageNo: 1,
        pageSize: 50,
        totalRecord: 0
      },
      tableLoading: false,
      tableColumns: [
        {
          title: '姓名',
          width: 180,
          tooltip: true,
          key: 'name',
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'card_no',
          tooltip: true,
          width: 260,
          align: 'center',
          visible: false
        },
        {
          title: '护照号码',
          key: 'passport_no',
          tooltip: true,
          width: 180,
          align: 'center',
          visible: false
        },
        {
          title: '年龄',
          width: 90,
          tooltip: true,
          key: 'age',
          align: 'center',
          visible: false
        },
        {
          title: '性别',
          width: 90,
          tooltip: true,
          key: 'sex',
          align: 'center',
          visible: false
        },
        {
          title: '联系电话',
          width: 90,
          tooltip: true,
          key: 'tel',
          align: 'center',
          visible: false
        },
        {
          title: '国籍',
          key: 'national',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '省',
          key: 'province',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: '市',
          key: 'city',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: '北京分流',
          key: 'is_bj_devide',
          tooltip: true,
          width: 130,
          align: 'center'
        },
        {
          title: '隔离方式',
          key: 'isolate_mode',
          tooltip: true,
          width: 180,
          align: 'center'
        },
        {
          title: '隔离宾馆或单位名称',
          key: 'isoliate_hotel',
          tooltip: true,
          width: 360,
          align: 'center'
        },
        {
          title: '隔离宾馆街道',
          key: 'isolated_hotel_street',
          tooltip: true,
          width: 260,
          align: 'center',
          visible: false
        },
        {
          title: '隔离宾馆社区',
          key: 'isolated_hotel_ommunity',
          tooltip: true,
          width: 200,
          align: 'center',
          visible: false
        },
        {
          title: '蓝牌地址',
          key: 'blue_card_address',
          tooltip: true,
          width: 260,
          align: 'center',
          visible: false
        },
        {
          title: '隔离开始时间',
          key: 'isolate_start_time',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        // {
        //   title: '入住时间',
        //   key: 'check_in_time',
        //   tooltip: true,
        //   width: 260,
        //   align: 'center'
        // },
        {
          title: '隔离结束时间',
          key: 'isolate_end_time',
          tooltip: true,
          width: 200,
          align: 'center'
        }, {
          title: '隔离剩余时间',
          key: 'toDays',
          tooltip: true,
          width: 120,
          align: 'center'
        },
        {
          title: '管控地区',
          key: 'control_area',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '隔离宾馆管理单位',
          key: 'isolate_company',
          tooltip: true,
          width: 260,
          align: 'center',
          visible: false
        },
        {
          title: '隔离管理人',
          key: 'isolate_manager',
          tooltip: true,
          width: 180,
          align: 'center',
          visible: false
        },
        // {
        //   title: '隔离性质',
        //   key: 'Isolation_property',
        //   tooltip: true,
        //   width: 150,
        //   align: 'center'
        // },
        {
          title: '隔离原因',
          key: 'isolation_reasons',
          tooltip: true,
          width: 180,
          align: 'center',
          visible: false
        },
        // {
        //   title: '隔离接触时间',
        //   key: 'isolated_contact_time',
        //   tooltip: true,
        //   width: 150,
        //   align: 'center'
        // },
        {
          title: '送诊时间',
          key: 'treat_time',
          tooltip: true,
          width: 180,
          align: 'center',
          visible: false
        },
        {
          title: '送诊地点',
          key: 'treat_area',
          tooltip: true,
          width: 180,
          align: 'center',
          visible: false
        },
        {
          title: '医学观察人姓名',
          key: 'watch_name',
          tooltip: true,
          width: 180,
          align: 'center',
          visible: false
        },
        {
          title: '医学观察人手机',
          key: 'watch_tel',
          tooltip: true,
          width: 180,
          align: 'center',
          visible: false
        },
        {
          title: '医学观察人单位',
          key: 'watch_company',
          tooltip: true,
          width: 180,
          align: 'center',
          visible: false
        }
      ],
      tableData: [],
      areaList: areaJSON,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      // 类型名称
      typeName: '',
      // 隔离状态
      stateName: '',
      // 选中
      areaNameList: {}
    }
  },
  computed: {},
  mounted () {
    if (this.$route.query && this.$route.query.areaName) {
      this.areaName = this.$route.query.areaName
      this.$refs.statisticsBar.isolationAction(this.$route.query.areaName)
    } else if (this.$route.query && this.$route.query.type) {
      this.getType(this.$route.query)
    } else if (this.$route.query && this.$route.query.state) {
      this.getType(this.$route.query)
    } else {
      this.init()
    }
  },
  methods: {
    // 获取类型
    getType (value) {
      this.stateName = ''
      this.typeName = ''
      if (value.type) {
        this.typeName = value.type
      } else if (value.state) {
        this.stateName = value.state
      }
      this.pageObj.pageNo = 1
      this.initData()
    },
    initData () {
      let data = {
        state: this.stateName,
        isolate_mode: this.typeName,
        county: this.areaNameList.county,
        key: this.areaNameList.key
      }
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        ...data
      }
      this.init(obj)
    },
    drawerSearch () {
      console.log(this.isolation_mode)
      this.init({ isolation_mode: this.isolation_mode.toString() })
    },
    search (value) {
      this.pageObj.pageNo = 1
      this.$refs.statisticsBar.isolationAction(value.county)
      if (value.county === '全市') {
        this.areaNameList = []
        this.initData()
        // this.init()
      } else {
        this.areaNameList = value
        this.initData()
        // this.init(value)
      }
      if (value.searchMore === 'searchMore') {
        console.log('1111')
        this.drawer = true
      }
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    searchAction () {},
    init (obj) {
      // console.log(data)
      // const obj = {
      //   pageNo: this.pageObj.pageNo,
      //   pageSize: this.pageObj.pageSize,
      //   ...data
      // }
      // console.log(obj)
      this.tableLoading = true
      findglrypxList(obj).then(ret => {
        let data = ret.data
        console.log(data)
        if (data.errcode === 0) {
          this.tableLoading = false
          this.pageObj.totalRecord = data.data.totalRecord
          this.totalnum = data.data.totalRecord
          for (let i = 0; i < data.data.results.length; i++) {
            data.data.results[i].samplingDate = this.getDate(data.data.results[i].sampling_date)
            data.data.results[i].imp_date = this.getDate(data.data.results[i].imp_date)
          }
          this.tableData = data.data.results
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    // 转换年月日方法
    getDate (str) {
      var oDate = new Date(str)
      var oYear = oDate.getFullYear()
      var oMonth = oDate.getMonth() + 1
      var oDay = oDate.getDate()
      // var oHour = oDate.getHours()
      // var oMin = oDate.getMinutes()
      // var oSec = oDate.getSeconds()
      var oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
      // + ' ' + this.getzf(oHour) + ':' + this.getzf(oMin) + ':' + this.getzf(oSec)// 最后拼接时间
      return oTime
    },
    // 补0操作
    getzf (num) {
      if (parseInt(num) < 10) {
        num = '0' + num
      }
      return num
    }
  }
}
</script>

<style scoped type="less">
    .container {
        margin-bottom: 50px;
    }
    .report-content {
        padding: 0 10px;
        height: auto;
    }
    .search-group {
        /*padding: 10px 0;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
    }
    .sub-title {
        /*border-left: 7px solid darkred;*/
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .sub-title span {
        font-size: 30px;
        font-weight: 800;
        color: #fff;
        margin: 0 3px;
    }
    .precent-group {
        display: flex;
        align-items: center;
    }
    .precent-group>.item {
        width: 180px;
        padding: 0 10px;
    }
    .precent-group>.item>.text {
        width: 100%;
    }
    .demo-drawer-footer {
        margin-top: 20px;
    }
    .inner-frame>.ivu-row {
        margin-bottom: 10px;
    }
    .menu {
        /*border: 1px solid white;*/
        border-radius: 5px;
        padding: 8px 20px;
        font-size: 18px;
    }

    .menu-item {
        cursor: pointer;
    }
    .statistics-group {
        width: 100%;
        padding: 10px;
    }
    .statistics-group .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        background-color: white;
        border-radius: 10px;

    }
    .item-style1{
        background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);
    }
    .item-style2{
        background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);
    }
    .item-style3{
        background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);
    }
    .item-style4{
        background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%);
    }
    .item-style5{
        background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);
    }
    .item-style6{
        background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);
    }
    .statistics-group .item .icon {
        font-size: 46px;
        color: white;
    }
    .statistics-group .item .content .txt{
        font-size: 14px;
        color: white;
        text-align: right;
    }
    .statistics-group .item .content .statistics{
        font-size: 32px;
        color: white;
    }
    .ivu-form-item{
        margin-bottom: 10px;
    }
    .ivu-col.ivu-col-span-6{
        width: 20%;
    }
    .main-table {
        margin-top: -45px;
    }
    .data-title {
        border-left: 6px solid darkred;
        padding-left: 7px;
        margin-right: 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
    }
    .search-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
    }
    .left-content {
        display: flex;
        align-items: center;
        z-index: 2;
    }
    .record-num {
        margin-right: 140px;
    }
    .ivu-checkbox-border{
        margin-bottom: 10px;
    }
</style>
